<template>
	<view>
	<view class="allwrap flexcumal">
		<!-- 群聊名称/成员 -->
		<view class="frame-top">
			<view class="title flexalign" @click="go('/pages3/set/groupInfo')">
				<image :src="avatar" class="img"></image>
				<text class="text lineclamp1">群聊名称</text>
				<image src="/static/set/code.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;"></image>
				<image src="/static/right.png" style="width: 14rpx;height: 24rpx;margin-left: 24rpx;"></image>
			</view>
			<view style="padding: 32rpx 32rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign" style="padding: 0rpx 32rpx;" @click="go('/pages3/set/people')">
				<view class="title-text">群成员</view>
				<text class="content-text">3</text>
				<image src="/static/right.png" style="width: 14rpx;height: 24rpx;margin-left: 19rpx;"></image>
			</view>
			<view class="flexalign" style="flex-wrap: wrap;padding-left: 9rpx;">
				<image :src="item.avatar" class="people-img" v-for="(item,index) in list" :key="index"></image>
				<image src="/static/set/add.png" class="people-img"></image>
				<image src="/static/set/sub.png" class="people-img"></image>
			</view>
		</view>
		<!-- 群应用 -->
		<view class="frame-top" style="margin-top: 32rpx;padding: 32rpx; 32rpx">
			<view class="flexalign">
				<view class="title-text">群应用</view>
			</view>
			<view class="flexalign" style="flex-wrap: wrap;">
					<view class="flexcolumnalign" style="width: 25%;margin-top: 32rpx;" @click="go('/pages3/set/notice')">
						<image src="/static/set/groupNotice.png" style="width: 43rpx;height: 36rpx;"></image>
						<text class="content-text" style="font-size: 26rpx;margin-top: 16rpx;">群公告</text>
					</view>
			</view>
		</view>
		<!-- 搜索会话内容 -->
		<view class="frame-top" style="margin-top: 32rpx;padding: 32rpx; 32rpx">
			<view class="flexalign">
				<view class="title-text">搜索会话内容</view>
			</view>
			<view style="padding: 32rpx 32rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign" style="flex-wrap: wrap;">
				<view class="flexcolumnalign" style="width: 20%;" v-for="(item,index) in optList" :key="index" @click="gotoSearch(index)">
					<image :src="item.icon" style="width: 40rpx;height: 40rpx;"></image>
					<text class="content-text" style="font-size: 26rpx;margin-top: 16rpx;">{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- 昵称/开关 -->
		<view class="frame-top" style="margin-top: 32rpx;padding: 32rpx; 32rpx">
			
			<view class="flexalign">
				<view class="title-text">群昵称</view>
				<text class="content-text">哈哈哈哈</text>
				<image src="/static/right.png" style="width: 14rpx;height: 24rpx;margin-left: 19rpx;"></image>
			</view>
			<view style="padding: 32rpx 0rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign">
				<view class="title-text">消息免打扰</view>
				<u-switch v-model="checked" :size="38" inactive-color="#DCDFE6"></u-switch>
			</view>
			<view style="padding: 32rpx 0rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign">
				<view class="title-text">@所有人的消息不提示</view>
				<u-switch v-model="checked" :size="38" inactive-color="#DCDFE6"></u-switch>
			</view>
			<view style="padding: 32rpx 0rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign">
				<view class="title-text">置顶会话</view>
				<u-switch v-model="checked" :size="38" inactive-color="#DCDFE6"></u-switch>
			</view>
			<view style="padding: 32rpx 0rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign">
				<view class="title-text">进群验证</view>
				<u-switch v-model="checked" :size="38" inactive-color="#DCDFE6"></u-switch>
			</view>
			<view style="padding: 32rpx 0rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexalign" @click="go('/pages3/set/verify')">
				<view class="title-text">新加入成员</view>
				<image src="/static/right.png" style="width: 14rpx;height: 24rpx;margin-left: 19rpx;"></image>
			</view>
		</view>
		<!-- 清空聊天记录 -->
		<view class="frame-top" style="margin-top: 32rpx;padding: 32rpx; 32rpx" @click="show = !show">
			<view class="flexalign">
				<view class="title-text">清空聊天记录</view>
			</view>
		</view>
		
		<!-- 退出/解散 -->
		<view class="frame-top" style="margin-top: 32rpx;padding: 32rpx; 32rpx">
			<view class="flexcenter" style="width: 100%;">
				<view class="title-text" style="color: #D54941;font-size: 30rpx;text-align: center;">退出群组</view>
			</view>
			<view style="padding: 32rpx 0rpx;">
			<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
			</view>
			<view class="flexcenter" @click="showPop = !showPop">
				<view class="title-text" style="color: #D54941;font-size: 30rpx;text-align: center;">解散群组</view>
			</view>
		</view>
		
		<view style="height: 71rpx;width: 100%;"></view>
	</view>
	
	<!-- 拨打语音/视频 -->
	<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view>
				<view class="frame-video flexcumal">
					<view class="text flexcenter" style="padding: 32rpx 43rpx;text-align: center;">聊天记录将在所有设备同步清空，该操作仅对自己生效</view>
					<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
					<view class="text flexcenter" style="color: #E25551;">清空</view>
				</view>
				<view class="frame-video-cancel flexcenter">
					取消
				</view>
				</view>
		</view>
	</u-mask>
	
	<u-popup v-model="showPop" mode="center" border-radius="24">
			<view class="Pop-frame flexcolumnalign">
				<view class="title">解散群组</view>
				<view class="text">解散后移除所有的群成员</view>
				<view style="padding: 32rpx 0rpx;">
				<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
				</view>
				<view style="display: flex;width: 100%;">
					<view class="button" @click="showPop = false">取消</view>
					<view class="button" style="color: #E25551;" @click="showPop = false">确定</view>
				</view>
			</view>
	</u-popup>
	
	<!-- 电话提示滑动快 -->
	<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar:'/static/set/people.png',
				checked:false,
				show:false,
				showPop:false,
				optList:[
					{
						text:'消息',
						icon:'/static/set/message.png'
					},{
						text:'云文档',
						icon:'/static/set/cloud.png'
					},
					{
						text:'文件',
						icon:'/static/set/file.png'
					},
					{
						text:'图片/视频',
						icon:'/static/set/img.png'
					},
					{
						text:'链接',
						icon:'/static/set/line.png'
					},
				],
				
				 // 组织成员
				 list:[
					{
						name:'王小二',
						avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
						checked:false
					},
					{
						name:'王小明',
						avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
						checked:false
					},
					{
						name:'李二',
						avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
						checked:false
					},
					// {
					// 	name:'张三',
					// 	avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
					// 	checked:false
					// },
					// {
					// 	name:'老四',
					// 	avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
					// 	checked:false
					// },
					// {
					// 	name:'王五',
					// 	avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
					// 	checked:false
					// },
					// {
					// 	name:'老六',
					// 	avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
					// 	checked:false
					// },
					// {
					// 	name:'老王',
					// 	avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
					// 	checked:false
					// },
					// {
					// 	name:'老李',
					// 	avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
					// 	checked:false
					// },
				],
			}
		},
		methods: {
			// 前往搜索页面
			gotoSearch(index){
				if(index == 0){
					this.go('/pages3/set/searchMessage')
				}else if(index == 3){
					this.go('/pages3/set/searchImgVideo')
				}else{
					this.go('/pages3/set/searchFile?type=' + index)
				}
			}
		}
	}
</script>

<style lang="less">
	page>view {
		background: #F3F4F6;
	}
	.frame-top{
		width: 686rpx;
		// height: 356rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 32rpx 0rpx;
		.title{
			padding: 32rpx 32rpx;
			.img{
				width: 100rpx;
				height: 100rpx;
				// background: #FFFFFF;
				// border: 2rpx solid #36A8F4;
				border-radius: 50%;
			}
			.text{
				margin-left: 24rpx;
				flex: 1;
				font-weight: normal;
				font-size: 36rpx;
				color: #000000;
			}
		}
		.title-text{
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			flex: 1;
		}
		.content-text{
			font-weight: 400;
			font-size: 30rpx;
			color: #6B6B6B;
		}
		.people-img{
			width: 74rpx;
			height: 74rpx;
			margin-left: 20rpx;
			border-radius: 50%;
			margin-top: 24rpx;
		}
	}
	
	.warp {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100%;
		.frame-video{
			  width: 686rpx;
			  height: 188rpx;
			  background: #FFFFFF;
			  border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
		.text{
			width: 100%;
			height: 94rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
		.frame-video-cancel{
			margin-top: 22rpx;
			margin-bottom: 60rpx;
			width: 686rpx;
			height: 94rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
	}
	.Pop-frame{
		width: 686rpx;
		height: 284rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		.title{
			margin-top: 32rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
		.text{
			margin-top: 50rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
		.button{
			width: 50%;
			font-weight: 400;
			font-size: 30rpx;
			color: #4A4A4A;
			text-align: center;
		}
	}
</style>
